<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>分页</title>
    <script type="text/javascript" src="src/js/jquery-2.1.4.js"></script>
</head>
<body>
<div style="width:450px;margin:0 auto;">
    <div id="dataShow" style="width:450px;margin:0 auto;">
        <table class="table" id="table"></table>
    </div>
    <br/>
    <div id="page" style="width:450px;margin:0 auto;"></div>
</div>
<script type="text/javascript">
    //编造表数据
    //表头
    var head =
        '<thead><tr>' +
        '<td> 姓  名 </td>' +
        '<td> 年  龄 </td>' +
        '<td> 彦  值* </td>' +
        '<td> 成  绩 </td>' +
        '<td> 身 高cm </td>' +
        '</tr></thead><tbody>';
    //表内容，后台返回的内容可以封装到这里，随时取用，但是如果数据量很大估计会相当耗资源。
    var pageData = [];
    for (var i = 1; i < 67; i++) {
        var data = '<tr>' +
            '<td>学生' + i + '</td>' +
            '<td>' + Math.round(Math.random() * 20) + '</td>' +
            '<td>' + Math.round(Math.random() * 5) + '颗星</td>' +
            '<td>' + Math.round(Math.random() * 100) + '</td>' +
            '<td>' + Math.round(Math.random() * 200) + 'cm</td>' +
            '</tr>';
        pageData.push(data);
    }
    //表结尾
    var end = '</tbody>';

    function showData(PageCount, PageSize) {
        $('a').on('click', function (event) {
                var selectPage = $(this).attr('selectPage');
                console.log(selectPage);
                console.log(PageCount);
                console.log(PageSize);
                debugger;
                $('#table').html('');
                $('#table').append(head);
                for (i = (selectPage - 1) * PageSize; i < PageSize * selectPage; i++) {
                    $('#table').append(pageData[i]);
                }
                $('#table').append(end);
            }
        )
    }


    function bindListener(PageCount, PageSize) {
        $('a').on('click', function (event) {
            var pageNo = $(this).attr('selectPage');
            if (pageNo > 3 && pageNo < PageCount - 1) {

                $('#table').html('');
                $('#table').append(head);
                for (i = (pageNo - 1) * PageSize; i < PageSize * pageNo; i++) {
                    $('#table').append(pageData[i]);
                }
                $('#table').append(end);

                $('#page').empty();
                for (var i = 1; i <= 5; i++) {
                    var pageN = '<a href="#" selectPage="' + parseInt(parseInt(i) + parseInt(pageNo) - parseInt(3)) + '" >第' + parseInt(parseInt(i) + parseInt(pageNo) - parseInt(3)) + '页</a>';
                    $('#page').append(pageN);
                    bindListener(PageCount, PageSize)
                }
            }
            else if (pageNo > 3 && !(pageNo < PageCount - 1)) {
                $('#table').html('');
                $('#table').append(head);

                for (i = (pageNo - 1) * PageSize; i < PageSize * pageNo; i++) {
                    $('#table').append(pageData[i]);
                }
                $('#table').append(end);
            }
            else if (pageNo <= 3 && pageNo > -1) {
                $('#table').html('');
                $('#table').append(head);
                for (i = (pageNo - 1) * PageSize; i < PageSize * pageNo; i++) {
                    $('#table').append(pageData[i]);
                }
                $('#table').append(end);

                $('#page').empty();
                for (var i = 1; i <= 5; i++) {
                    var pageN = '<a href="#" selectPage="' + i + '" >第' + i + '页</a>';
                    $('#page').append(pageN);
                    bindListener(PageCount, PageSize)
                }
            }
        })
    }

    $(function () {
        var Count = pageData.length;//记录条数
        var PageSize = 10;//设置每页示数目
        var PageCount = Math.ceil(Count / PageSize);//计算总页数
        var currentPage = 1;//当前页，默认为1。
        //造个简单的分页按钮


        //显示默认页（第一页）
        $('#table').empty().append(head);
        for (i = (currentPage - 1) * PageSize; i < PageSize * currentPage; i++) {

            $('#table').append(pageData[i]);
        }
        $('#table').append(end);

        if (PageCount < 6) {
            for (var i = 1; i <= PageCount; i++) {
                var pageN = '<a href="#" selectPage="' + i + '" >第' + i + '页</a>';
                $('#page').append(pageN);
                showData(PageCount, PageSize)
            }
        } else {
            for (var i = 1; i <= 5; i++) {
                var pageN = '<a href="#" selectPage="' + i + '" >第' + i + '页</a>';
                $('#page').append(pageN);
                bindListener(PageCount, PageSize)
            }
        }
    });
</script>
</body>
</html>